<div class="content">
    <div class="text-h5 header-text">
        Data Sources
    </div>
    <div class="text-subtitle-1 font-weight-regular">
        Connect a data source to share your data via the Connector.
    </div>
    <v-row>
        <add-backend-connection-dialog ref="addBackendConnectionDialog" @backendConnectionSaved="backendConnectionSaved">
        </add-backend-connection-dialog>
    </v-row>
    <v-row no-gutters>
        <v-col cols="12" md="6" sm="6">
            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details></v-text-field>
        </v-col>
        <v-col cols="12" md="11" sm="12">
            <v-data-table v-model="selected" :headers="headers" :items="backendConnections" :items-per-page="5"
                          :search="search" item-key="url" no-data-text="No backend connections available">
                <template v-slot:item.actions="{ item }">
                    <v-icon class="mr-2" @click="editItem(item)">
                        mdi-pencil
                    </v-icon>
                    <v-icon @click="deleteItem(item)">
                        mdi-delete
                    </v-icon>
                </template>
            </v-data-table>
        </v-col>
    </v-row>
    <confirmation-dialog ref="confirmationDialog"></confirmation-dialog>
</div>